/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="user-form"
             :label-width="100">
        <sf-form-item>
            <sf-fieldlabel>
                <lang>用户名称</lang>
            </sf-fieldlabel>
            <sf-textfield
                v-if="isEdit"
                v-model="submitData.username"
                :default-disabled="true"
                :default-width="defaultWidth"
                :allow-blank="isEdit"/>
            <sf-textfield v-else
                          v-model="usernames"
                          :default-width="defaultWidth"
                          :allow-blank="false"
                          :rows="1"
                          :utf8length="false"
                          :validator="userNameValidator"
                          :placeholder="userNameInfo"/>
        </sf-form-item>
        <sf-form-item v-if="!isOwn">
            <sf-fieldlabel>
                <lang>用户密码</lang>
            </sf-fieldlabel>
            <sf-textfield v-model="submitData.password"
                          :default-width="defaultWidth"
                          :placeholder="passwordText"
                          :allow-blank="isEdit"
                          :validator="_passwordValidator"/>
            <sf-fieldtip>
                <lang>密码需满足大写字母，小写字母，数字和特殊字符任意三种组合，且长度在8到30位之间</lang>
            </sf-fieldtip>
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>权限</lang>
            </sf-fieldlabel>
            <sf-checkbox v-model="submitData.role"
                         class="sfv-fieldlabel-left">
                <lang>设为管理员</lang>
            </sf-checkbox>
        </sf-form-item>
        <resource-config-form-vgpu
            ref="defaultResource"
            use-page="user"
            :is-edit="isEdit"
            :default-width="defaultWidth"
            :allow-decimals="true"
            :label-name="_('资源分配')"
            :resource-nums="resourceNums"
            :submit-data="submitData">
            <template slot="cpu_content">
                <div class="m-b10 gray">
                    <lang>
                        指定您的服务器需使用的CPU个数，目前仅支持整数分配,对于CPU密集型任务，可以选择超过一个CPU。（eg：2）
                    </lang>
                </div>
            </template>
            <template slot="gpu_content">
                <div class="m-b10 gray">
                    <lang>
                        指定该工作空间需使用的GPU类型和数量，资源不能超过用户配额最大值。
                    </lang>
                </div>
            </template>
            <template slot="memorySize_content">
                <div class="m-b10 gray">
                    <lang>
                        指定该工作空需的内存大小，目前仅支持整数分配。（eg：8）
                    </lang>
                </div>
            </template>
            <div class="resource-form__option-content">
                <div class="m-b10 gray">
                    <lang>指定您的服务器所需使用的内存总量</lang>
                </div>
                <div
                    class="option-content__option-input">
                    <i class="iconfont iconneicun"></i>
                    <lang>工作存储空间</lang>
                    <sf-numberfield
                        v-model="submitData.volumeSize"
                        :min-value="1"
                        :allow-decimals="true"
                        :default-width="60"/>
                    <lang>GB</lang>
                </div>
                <div
                    class="option-content__option-slider">
                    <div class="option-slider__text">
                        <div>1GB</div>
                        <div>(MIN)</div>
                    </div>
                    <el-slider
                        v-model="submitData.volumeSize"
                        class="option-slider__sxf-slider"
                        tooltip-class="sxf-slider__tooltip"
                        :min="1"
                        :max="resourceNums.workspace"/>
                    <div class="option-slider__text">
                        <div>{{ resourceNums.workspace }}GB</div>
                        <div>(MAX)</div>
                    </div>
                </div>
            </div>
        </resource-config-form-vgpu>
        <div class="user-form__dataSpace" @click="switchDataSpace">
            <i :class="showDataSpace? 'el-icon-minus':'el-icon-plus'"/>
            {{ !showDataSpace?  _('添加数据空间'): _('删除数据空间') }}
        </div>
        <sf-collapse-transition>
            <div v-show="showDataSpace">
                <sf-form-item>
                    <sf-fieldlabel>
                        <lang>空间名称</lang>
                    </sf-fieldlabel>
                    <sf-textfield
                        v-if="isEdit"
                        v-model="submitData.username"
                        :default-disabled="true"
                        :default-width="defaultWidth"/>
                    <sf-textfield
                        v-else
                        v-model="usernames"
                        :default-disabled="true"
                        :default-width="defaultWidth"/>
                </sf-form-item>
                <sf-form-item style="display: flex">
                    <sf-fieldlabel class="p-l0">
                        <lang>数据集上限</lang>
                    </sf-fieldlabel>
                    <div class="resource-form__option-content">
                        <div class="option-content__option-input">
                            <sf-numberfield
                                v-model="submitData.datasetCapacity"
                                :min-value="5"
                                :default-width="60"/>
                            <lang>个</lang>
                        </div>
                        <div class="option-content__option-slider">
                            <div class="option-slider__text">
                                <div>
                                    <lang>5个</lang>
                                </div>
                                <div>(MIN)</div>
                            </div>
                            <el-slider
                                v-model="submitData.datasetCapacity"
                                class="option-slider__sxf-slider"
                                tooltip-class="sxf-slider__tooltip"
                                :step="5"
                                :min="5"
                                :max="resourceNums.datasetCapacity"/>
                            <div class="option-slider__text">
                                <div>{{ _("{0}个", resourceNums.datasetCapacity) }}</div>
                                <div>(MAX)</div>
                            </div>
                        </div>
                    </div>
                </sf-form-item>
                <sf-form-item style="display: flex">
                    <sf-fieldlabel class="p-l0">
                        <lang>总容量上限</lang>
                    </sf-fieldlabel>
                    <div class="resource-form__option-content">
                        <div class="option-content__option-input">
                            <sf-numberfield
                                v-model="submitData.dataSpaceCapacity"
                                :min-value="500"
                                :default-width="60"/>
                            <lang>G</lang>
                        </div>
                        <div class="option-content__option-slider">
                            <div class="option-slider__text">
                                <div>
                                    <lang>500G</lang>
                                </div>
                                <div>(MIN)</div>
                            </div>
                            <el-slider
                                v-model="submitData.dataSpaceCapacity"
                                class="option-slider__sxf-slider"
                                tooltip-class="sxf-slider__tooltip"
                                :step="500"
                                :min="500"
                                :max="resourceNums.dataSpaceCapacity"/>
                            <div class="option-slider__text">
                                <div>{{ _("{0}G", resourceNums.dataSpaceCapacity) }}</div>
                                <div>(MAX)</div>
                            </div>
                        </div>
                    </div>

                </sf-form-item>
            </div>
        </sf-collapse-transition>
    </sf-form>
</template>

<style lang="less" scoped>

.user-form {
    .sfv-fieldlabel-left {
        padding-left: 0;
        height: 32px;
        line-height: 32px;
    }

    .user-form__dataSpace {
        cursor: pointer;
        margin-bottom: 30px;
    }

    .resource-form__option-content {
        width: 400px;
        border: 1px solid #dddddd;
        border-radius: 2px;
        padding: 10px 20px;
        margin-bottom: 10px;
        margin-top: 0;
        background: #fff;

        .option-content__option-input {
            line-height: 32px;
        }

        .option-content__option-slider {
            display: flex;
            margin-top: 10px;
        }

        .option-slider__sxf-slider {
            flex: 1;
            padding: 0 10px;
        }

        .option-slider__text {
            text-align: center;
            color: #adadad;
        }
    }
}

</style>

<script>

import passwordValidator from 'src/util/validator/password_validator';
import resourceConfigFormVgpu from 'src/home/mod_cluster/common/common_form/resource_config_form_vgpu';

const WORD_LIMIT = 30;
const FIELD_WIDTH = 400;
const DEFAULT_VALUE = {
    username: '',
    cpuNum: 1,
    gpuNum: 0,
    role: false,
    password: '',
    memorySize: 1,
    vGpuMemory: 0,
    usernames: [],
    volumeSize: 1,
    vGpuNum: 0,
    vGpuDisplayName: '',
    dataSpaceName: "",
    datasetCapacity : 5, // 数据集总量
    dataSpaceCapacity: 1, // 数据空间总量
};


export default {
    props: {
        title: String
    },

    components: {
        resourceConfigFormVgpu
    },

    data() {
        return {
            submitData: {...DEFAULT_VALUE},
            showDataSpace: false, // 这个参数表示是否开启数据空间
            haveDataSpace: false, // 这个参数表示修改,只在编辑时用到的时候是否本身就含有数据空间
            isEdit:false,
            isOwn: false,
            usernames: '',
            resourceNums: {
                cpu: 256,
                memory: 256,
                gpu: 256,
                workspace: 10000,
                datasetCapacity: 100, // 数据集
                dataSpaceCapacity: 20000, // 数据容量
            },
            passwordText: _('请输入密码')
        };
    },

    computed: {
        defaultWidth() {
            return FIELD_WIDTH;
        },
        userNameInfo() {
            return _('请输入用户名 如：tangming73136');
        }
    },
    mounted() {
    },

    methods: {

        switchDataSpace() {
            this.showDataSpace = !this.showDataSpace
        },
        userNameValidator() {
            let regExp = /^[a-z0-9]([-a-z0-9]*[a-z0-9]){2,}$/;

            if (String(this.usernames) !== 'undefined') {

                // 对textArea换行(转行成 \n 的形式)进行处理
                let usernamesArr = this.usernames.split('\n');

                // 过滤空字符串(textarea换行后不填导致)
                usernamesArr = usernamesArr.filter(item => item !== '');
                if (usernamesArr.length === 0) {
                    return _('该输入项不允许为空');
                }
                for (let i of usernamesArr) {
                    if (i.length > WORD_LIMIT) {
                        return _('每个用户名的长度均不能大于30个字符');
                    }
                    if (!regExp.test(i)) {
                        return _('用户名只能包含小写字母、数字、横杠（横杠不能为首字符），而且最少为3个字符（不含横杠）');
                    }
                }
            }
            return true;
        },
        _passwordValidator: passwordValidator,
        setJsonValue(data) {
            if (data.totalCapacity !== '0') {
                this.showDataSpace = true;
                this.haveDataSpace = true;
            }
            Object.assign(this.submitData, data);
            this.submitData.datasetCapacity = data.datasetCapacity;
            this.submitData.dataSpaceCapacity = Number(data.totalCapacity);
            this.submitData.role = !!data.role;
            this.submitData.password = '';
            this.passwordText = _('输入可修改密码');
        },

        getJsonValue() {
            let usernamesArr = this.usernames.split('\n');

            // 过滤空字符串(textarea换行后不填导致)
            this.submitData.usernames = usernamesArr.filter(item => item !== '');
            this.submitData.role = this.submitData.role ? 1 : 0;
            this.submitData.dataSpaceName = this.isEdit ? this.submitData.username : this.usernames;
            if (this.isOwn) {
                this.submitData.password = '';
            }
            if (this.isEdit) {
                if(this.haveDataSpace && this.showDataSpace) {
                    this.submitData.dataSpaceEditFlag = 2
                } else if (this.haveDataSpace && !this.showDataSpace) {
                    this.submitData.dataSpaceEditFlag = 3
                } else if (!this.haveDataSpace && this.showDataSpace) {
                    this.submitData.dataSpaceEditFlag = 1;
                } else {
                    this.submitData.dataSpaceEditFlag = 0;
                }
            } else {
                if(this.showDataSpace) {
                    this.submitData.dataSpaceEditFlag = 1;
                } else {
                    this.submitData.dataSpaceEditFlag = 0;
                }
            }

            return {
                ...this.submitData,
                dataSpaceCapacity: this.submitData.dataSpaceCapacity + 'GB'
            };
        },
        reset() {
            this.submitData = {...DEFAULT_VALUE};
        }

    }
};
</script>
